<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="登录名">
        <el-input v-model="listQuery.loginName" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="登录信息">
        <el-select v-model="listQuery.loginError" placeholder="请选择" clearable @change="loginChange">
          <el-option  label="成功" value="1"></el-option>
          <el-option  label="失败" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜索时间 ">
        <div class="block">
          <el-date-picker
            v-model="value"
            @change="change"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList(1)">搜索</el-button>
      </el-form-item>
    </el-form>
    <mytable ref="table" @getList="getList" :listQuery="listQuery">
      <el-table-column prop="loginName" align="center" label="登录名"></el-table-column>
      <el-table-column prop="loginError" align="center" label="登录信息"></el-table-column>
      <el-table-column prop="loginTime" align="center" label="登录时间"></el-table-column>
      <!-- <el-table-column prop="serverType"  align="center" label="登录类型"></el-table-column>
      <el-table-column  prop="userType" align="center" label="用户类型"></el-table-column> -->
    </mytable>
  </div>
</template>

<script>
import apilogManagements from "@/api/logManage/itouchLoginRecord"
import Pagination from "@/components/Pagination";
import mytable from "@/components/Table";
export default {
  name: "loginRecord",
  components: { mytable },
  data() {
    return {
      list: [],
      listQuery: {
        title:'',
        loginStartTime:"",//开始时间
        loginEndTime:"" ,//结束时间
      },
      value:[]
    };
  },
  created(){
  },
  methods: {
    // 登录信息查询
    loginChange(e){
      this.listQuery.status=e
    },
    // 时间查询
    change(date){
      if(date && date.length >0){
        this.listQuery.loginStartTime = date[0];
        this.listQuery.loginEndTime = date[1]
      }else{
        this.listQuery.loginStartTime = "";
        this.listQuery.loginEndTime = "";
      }
    },
    getList(pageNo){
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      apilogManagements.getLogList(this.listQuery).then(res=>{
        console.log(res);
        this.$refs.table.load(res.list, res.total);
      })     
    },
  }
};
</script>

<style scoped>
</style>